<template>
  <div class="review-team">
    <div class="course--wrap-item" v-for="v in tableData" :key="v.id">
      <div class="img-box img-hover">
        <!-- <div v-if="v.selection == 1 && v.auditStatus == 2" class="selection">
          优质
        </div> -->
        <img :src="coverImg(v.sysCourseInfo)" />
      </div>
      <div class="txt-box">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="txt-wrap">
              <p>
                <b>名称：{{ v.sysCourseInfo.title }}</b>
              </p>
              <p>
                <i>建设单位：</i>
                <span>{{ deptNames(v.sysCourseInfo) }}</span>
              </p>
              <p class="sheng">
                <i>建设团队：</i>
                <span :title="teamInfo(v.sysCourseInfo)">{{
                  teamInfo(v.sysCourseInfo)
                }}</span>
              </p>
              <p>
                <i
                  >{{
                    v.sysCourseInfo.courseType > 3 ? '板块' : '元素库'
                  }}类别：</i
                >{{ v.sysCourseInfo.courseType | fiterCategoryLabels }}
              </p>
            </div>
            <div class="btn-wrap">
              <!-- <Buttons :row="v" /> -->
            </div>
          </el-col>
          <el-col :span="12">
            <div class="txt-wrap">
              <p style="opacity: 0">1</p>
              <p><i>上传日期：</i>{{ v.sysCourseInfo.createTime }}</p>
              <p v-if="v.isDel"
                ><i>课程状态：</i><span class="color-danger">资源已删除</span>
              </p>
              <p v-if="!v.isDel">
                <span
                  v-show="
                    v.sysCourseInfo.status == 0 &&
                    v.sysCourseInfo.auditStatus == 1
                  "
                >
                  <i>课程状态：</i>暂存</span
                >
                <span v-show="v.sysCourseInfo.status == 1"
                  ><i>课程状态：</i>已上线</span
                >
                <span v-show="v.sysCourseInfo.status == 2"
                  ><i>课程状态：</i>待发布</span
                >
              </p>
              <p
                v-if="!v.isDel"
                v-show="
                  v.sysCourseInfo.status == 0 &&
                  v.sysCourseInfo.auditStatus != 1
                "
              >
                <i>审核状态：</i>
                <span v-show="v.sysCourseInfo.auditStatus == 4">待审核</span>
                <span
                  class="color-success"
                  v-show="v.sysCourseInfo.auditStatus == 2"
                >
                  审核通过，待发布
                </span>
                <span
                  class="color-danger"
                  v-show="v.sysCourseInfo.auditStatus == 3"
                >
                  审核未通过
                </span>
              </p>
            </div>
          </el-col>
          <el-col :span="24">
            <el-button
              type="success"
              plain
              size="mini"
              :disabled="v.isDel"
              @click="handlePreview(v.sysCourseInfo)"
              >预览</el-button
            >
            <el-button type="danger" plain size="mini" @click="handleDelete(v)"
              >移除</el-button
            >
            <!-- <el-button
              type="custom"
              plain
              size="mini"
              @click="handleReviewLog(v)"
              >评审记录</el-button
            > -->
          </el-col>
        </el-row>
      </div>
    </div>
    <Pagination
      v-show="parseInt(pageObj.count) > 0"
      :total="parseInt(pageObj.count)"
      @change="getList"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
    />
  </div>
</template>
<script>
import {
  expertsReviewResourceQuery,
  expertsReviewResourceDelete,
  expertsReviewResourceSetLeader,
} from '@/api/admin/audit/expertsReviewResource.js'
import webinfo from '@/mixins/webinfo.js'
import setInfo from '@/mixins/setInfo.js'
import coursePreview from '@/mixins/coursePreview'
import Bus from '@/utils/bus.js'
export default {
  mixins: [webinfo, setInfo, coursePreview],
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10,
        reviewId: '',
      },
      tableData: [],
      pageObj: {},
    }
  },
  props: ['reviewData'],
  computed: {
    deptNames() {
      return (v) => {
        if (v.sourceType == 2 && v.extFiled2) {
          //校外资源前端显示资源建设单位
          return v.extFiled2
        } else if (v.tbSysDept) {
          let dep = v.tbSysDept.deptFullnamepath.split('/')
          if (dep.length >= 3) {
            return dep[2]
          } else {
            return '陆军工程大学'
          }
        } else {
          return '陆军工程大学'
        }
      }
    },
  },
  watch: {
    reviewData: {
      immediate: true,
      handler() {
        this.listQuery.reviewId = this.reviewData.id
      },
    },
  },
  mounted() {
    this.getList()
    Bus.$on('refreshReviewResource', (v) => {
      if (v) {
        Object.assign(this.listQuery, v)
      }
      this.getList()
    })
  },
  beforeDestroy() {
    Bus.$off('refreshReviewResource')
  },
  methods: {
    getList() {
      expertsReviewResourceQuery(this.listQuery).then((res) => {
        this.tableData = res.data.data
        this.tableData.forEach((v) => {
          this.$set(v, 'isDel', false)
          if (!v.sysCourseInfo.id) {
            v.sysCourseInfo = JSON.parse(v.extFiled)
            v.isDel = true
          }
        })
        this.pageObj = res.data
      })
    },

    //评审记录
    handleReviewLog(row) {
      // console.log(row)
    },
    //删除确认
    handleDelete(row) {
      this.$confirm('确定要移除吗?', '提示', {
        confirmButtonText: '移除',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delete(row)
        })
        .catch(() => {})
    },
    //删除
    delete(row) {
      expertsReviewResourceDelete(row.id).then((res) => {
        this.getList()
        this.$message({
          message: '操作成功',
          type: 'success',
        })
      })
    },
  },
}
</script>
<style scoped lang="scss">
.review-team {
  margin-top: 20px;
}
.review-team >>> .el-table .cell {
  overflow: inherit;
}
.course--wrap-item {
  margin-top: -1px;
  position: relative;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
  border: 1px solid #eee;
  height: 180px;
  overflow: hidden;
  background: #f5f7fa;
  box-shadow: 0 0 6px #ddd;
  .img-box {
    position: absolute;
    left: 20px;
    top: 20px;
    border: 1px solid #eee;
    width: 240px;
    height: 180px;
    .selection {
      position: absolute;
      left: 0;
      top: 10px;
      color: #fff;
      z-index: 9;
      width: 60px;
      height: 30px;
      line-height: 30px;
      text-indent: 10px;
      background: url('~@/assets/icon02.png') no-repeat center;
      background-size: contain;
      font-size: 12px;
    }
  }
  .txt-box {
    width: 100%;
    height: 180px;
    padding-left: 260px;
    box-sizing: border-box;
    .txt-wrap {
      height: 145px;
      p {
        color: #333;
      }
      b {
        font-size: 16px;
        position: relative;
        padding-left: 12px;
        color: var(--colorH1);
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 3px;
          width: 4px;
          height: 16px;
          border-radius: 1px;
          background-color: var(--colorH1);
        }
      }
      i {
        position: relative;
        padding-left: 12px;
        font-weight: bold;
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 8px;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: var(--colorH1);
        }
      }
    }
  }
}
</style>